<template>
  <!-- footer底部 -->
  <div class="footer">
    <div class="section_inner">
      <div class="footer_info">
        <div class="footer_download">
          <h3 class="footer_tit">下载QQ音乐客户端</h3>
          <ul class="footer_download_list">
            <li class="footer_download_list__item">
              <a class="js_footer_down">
                <i class="icon_qm_pc"><span class="icon_txt"></span></i>
                PC版
              </a>
            </li>
            <li class="footer_download_list__item">
              <a class="js_footer_down"
                ><i class="icon_qm_mac"><span class="icon_txt"></span></i>Mac版
              </a>
            </li>
            <li class="footer_download_list__item">
              <a class="js_footer_down">
                <i class="icon_qm_android"><span class="icon_txt"></span></i
                >Android版
              </a>
            </li>
            <li class="footer_download_list__item">
              <a class="js_footer_down"
                ><i class="icon_qm_iphone"><span class="icon_txt"></span></i
                >iPhone版</a
              >
            </li>
          </ul>
        </div>
        <div class="footer_product">
          <h3 class="footer_tit">特色产品</h3>
          <ul class="footer_product_list">
            <li
              class="footer_product_list__item footer_product_list__item--pic"
            >
              <a
                href="http://kg.qq.com/?pgv_ref=qqmusic.y.topmenu"
                target="_blank"
                class="js_other_link"
                ><i class="icon_qm_kg"></i>全民K歌</a
              >
            </li>
            <li
              class="footer_product_list__item footer_product_list__item--pic"
            >
              <a
                href="http://y.qq.com/vip/voice_intro/index.html"
                target="_blank"
                class="js_other_link"
                ><i class="icon_qm_ss"></i>银河音效</a
              >
            </li>
            <li
              class="footer_product_list__item footer_product_list__item--pic"
            >
              <a
                href="http://y.qq.com/y/static/down/qplay.html?pgv_ref=qqmusic.y.topmenu"
                target="_blank"
                class="js_other_link"
                ><i class="icon_qm_qp"></i>QPlay
              </a>
            </li>
            <li
              class="footer_product_list__item footer_product_list__item--pic"
            >
              <a class="js_footer_down"
                ><i class="icon_qm_fan"></i>Fan直播伴侣</a
              >
            </li>
            <li class="footer_product_list__item">
              <a
                href="http://y.qq.com/y/static/down/car_introduce.html"
                target="_blank"
                class="js_other_link"
                >车载互联</a
              >
            </li>
            <li class="footer_product_list__item">
              <a
                href="http://y.qq.com/yanchu/?pgv_ref=qqmusic.y.topmenu"
                target="_blank"
                class="js_other_link"
                >QQ演出</a
              >
            </li>
          </ul>
        </div>
        <div class="footer_group">
          <h3 class="footer_tit">TME集团官网</h3>
          <ul class="footer_group_list">
            <li class="footer_platform_list__item">
              <a
                href="https://www.tencentmusic.com/"
                target="_blank"
                class="js_other_link"
                >腾讯音乐</a
              >
            </li>
          </ul>
        </div>
        <div class="footer_link">
          <h3 class="footer_tit">合作链接</h3>
          <ul class="footer_link_list">
            <li class="footer_link_list__item">
              <a
                href="//y.qq.com/portal/company_detail.html?id=297"
                target="_blank"
                class="js_other_link"
                >CJ ENM</a
              >
            </li>
            <li class="footer_link_list__item">
              <a href="http://v.qq.com/" target="_blank" class="js_other_link"
                >腾讯视频</a
              >
            </li>
            <li class="footer_link_list__item">
              <a
                href="http://z.qzone.com/"
                target="_blank"
                class="js_other_link"
                >手机QQ空间</a
              >
            </li>
            <li class="footer_link_list__item">
              <a href="http://im.qq.com/" target="_blank" class="js_other_link"
                >最新版QQ</a
              >
            </li>
            <li class="footer_link_list__item">
              <a
                href="http://e.qq.com/index.shtml"
                target="_blank"
                class="js_other_link"
                >腾讯社交广告</a
              >
            </li>
            <li class="footer_link_list__item">
              <a
                href="http://guanjia.qq.com/"
                target="_blank"
                class="js_other_link"
                >电脑管家</a
              >
            </li>
            <li class="footer_link_list__item">
              <a
                href="http://browser.qq.com/"
                target="_blank"
                class="js_other_link"
                >QQ浏览器</a
              >
            </li>
            <li class="footer_link_list__item">
              <a
                href="http://www.weiyun.com/"
                target="_blank"
                class="js_other_link"
                >腾讯微云</a
              >
            </li>
            <li class="footer_link_list__item">
              <a
                href="https://cloud.tencent.com/?fromSource=gwzcw.756433.756433.756433"
                target="_blank"
                class="js_other_link"
                >腾讯云</a
              >
            </li>
            <li class="footer_link_list__item">
              <a href="http://fm.qq.com/" target="_blank" class="js_other_link"
                >企鹅FM</a
              >
            </li>
            <li class="footer_link_list__item">
              <a
                href="http://www.znds.com/"
                target="_blank"
                class="js_other_link"
                >智能电视网</a
              >
            </li>
            <li class="footer_link_list__item">
              <a
                href="http://www.dangbei.com/"
                target="_blank"
                class="js_other_link"
                >当贝市场</a
              >
            </li>
            <li class="footer_link_list__item">
              <a
                href="https://www.kuwo.cn/"
                target="_blank"
                class="js_other_link"
                >酷我音乐</a
              >
            </li>
            <li class="footer_link_list__item">
              <a
                href="https://www.kugou.com/ts/"
                target="_blank"
                class="js_other_link"
                >酷狗听书</a
              >
            </li>
          </ul>
        </div>
        <div class="footer_platform">
          <h3 class="footer_tit">开放平台</h3>
          <ul class="footer_platform_list">
            <li class="footer_platform_list__item">
              <a
                href="//y.qq.com/artists"
                target="_blank"
                class="js_other_link"
              >
                QQ音乐开放平台
              </a>
            </li>
            <li class="footer_platform_list__item">
              <a
                href="http://y.tencentmusic.com/"
                target="_blank"
                rel="noopener noreferrer"
                class="js_other_link"
              >
                腾讯音乐人
              </a>
            </li>
            <li class="footer_platform_list__item">
              <a
                href="https://y.qq.com/tmead/promotion-pc/?ad_tag=ad_musicpromotion_pc_qqwebsite"
                target="_blank"
                class="js_other_link"
              >
                音乐推
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="footer_copyright">
        <p>
          <a href="http://www.tencent.com/" target="_blank" title="关于腾讯"
            >关于腾讯</a
          >
          <!-- -->|<a
            href="http://www.tencent.com/index_e.shtml"
            target="_blank"
            title="About Tencent"
            >About Tencent</a
          >
          <!-- -->|<a
            href="http://www.qq.com/contract.shtml"
            target="_blank"
            title="服务条款"
            >服务条款</a
          >
          <!-- -->|<a
            href="http://y.qq.com/y/static/tips/service_tips.html"
            target="_blank"
            title="用户服务协议"
            >用户服务协议</a
          >
          <!-- -->|<a
            href="https://y.qq.com/m/client/intro/privacy.html"
            target="_blank"
            title="隐私政策"
            >隐私政策</a
          >
          <!-- -->|<a
            href="https://y.qq.com/vip/right_declare/index.html"
            target="_blank"
            title="权利声明"
            >权利声明</a
          >
          <!-- -->|<a
            href="http://www.tencentmind.com/"
            target="_blank"
            title="广告服务"
            >广告服务</a
          >
          <!-- -->|<a
            href="http://hr.tencent.com/"
            target="_blank"
            title="腾讯招聘"
            >腾讯招聘</a
          >
          <!-- -->|<a
            href="https://y.qq.com/m/client/helper/pc.html"
            target="_blank"
            title="客服中心"
            >客服中心</a
          >
          <!-- -->|<a
            href="http://www.qq.com/map/"
            target="_blank"
            title="网站导航"
            >网站导航</a
          >
          <!-- -->|<a title="举报中心">举报中心</a>
        </p>
        <p>
          Copyright © 1998 -
          <!-- -->2022
          <!-- -->
          Tencent.
          <!-- -->
          <a
            target="_blank"
            href="http://www.tencent.com/en-us/le/copyrightstatement.shtml"
            >All Rights Reserved.</a
          >
        </p>
        <p>
          腾讯公司
          <!-- -->
          <a
            target="_blank"
            href="http://www.tencent.com/zh-cn/le/copyrightstatement.shtml"
            title="版权所有"
            >版权所有</a
          >｜<a
            target="_blank"
            href="https://y.qq.com/music/common/upload/t_cm3_photo_publish/4055034.jpg"
            title="营业执照"
            >营业执照</a
          >｜
          <!-- -->网络文化经营许可证：<a
            target="_blank"
            href="https://y.qq.com/music/common/upload/t_cm3_photo_publish/4043272.jpg"
            title="粤网文[2020]3396-195号"
            >粤网文[2020]3396-195号</a
          >｜
          <!-- -->客服电话：<a href="tel:4006016666" title="客服电话"
            >4006016666</a
          >｜
          <!-- -->违法与不良信息举报邮箱：<a
            href="mailto:tme_musicjubao@tencentmusic.com"
            title="违法与不良信息举报邮箱"
            >tme_musicjubao@tencentmusic.com</a
          >
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "Footer",
};
</script>

<script lang="ts" setup></script>

<style scoped>
/* 首页底部 footer */
.footer {
  height: 643.5px;
  background-color: #333;
}
.footer .section_inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  /* border: 1px solid red; */
}
.footer_info > div {
  float: left;
  color: rebeccapurple;
}
/* 清除浮动 */
.footer_info::after {
  content: "";
  display: block;
  clear: both;
}
/* footer 第一部分 footer_download*/
.footer_download {
  width: 357px;
  height: 214px;

  /* border: 1px solid red; */
}
.footer_download .footer_tit,
.footer_tit {
  width: 357px;
  height: 22.5px;
  padding: 80px 0 30px 0;
  /* border: 1px solid red; */
  font-size: 15px;
  color: #999;
}
.footer_download .footer_download_list {
  /* width: 386px; */
  height: 81px;
  /* border: 1px solid wheat; */
  font-size: 15px;
  color: #999;
}
.footer_download_list__item,
.footer_product_list__item {
  height: 81px;
  float: left;
  width: 25%;
  /* border: 1px solid green; */
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 15px;
  color: #999;
  position: relative;
}
.footer_download_list__item a {
  text-align: center;
  font-size: 14px;
}
.js_footer_down i,
.footer_product_list li i {
  position: absolute;
  width: 55px;
  height: 50px;
  left: 0;
  top: 0;
  /* border: 1px solid greenyellow; */
}
/* 采用雪碧图制作 图标 */
.footer_download_list li:nth-child(1) .js_footer_down i {
  background-image: -webkit-image-set(
    url("/src/assets/footer.png") 1x,
    url("/src/assets/footer.png") 2x
  );
  background-position: 0px 0px;
}
.footer_download_list li:nth-child(2) .js_footer_down i {
  background-image: -webkit-image-set(
    url("/src/assets/footer.png") 1x,
    url("/src/assets/footer.png") 2x
  );
  background-position: -90px 0px;
}
.footer_download_list li:nth-child(3) .js_footer_down i {
  background-image: -webkit-image-set(
    url("/src/assets/footer.png") 1x,
    url("/src/assets/footer.png") 2x
  );
  background-position: -180px 0px;
}
.footer_download_list li:nth-child(4) .js_footer_down i {
  background-image: -webkit-image-set(
    url("/src/assets/footer.png") 1x,
    url("/src/assets/footer.png") 2x
  );
  background-position: -270px 0px;
}

.footer_product_list li:nth-child(1) i {
  background-image: -webkit-image-set(
    url("/src/assets/footer.png") 1x,
    url("/src/assets/footer.png") 2x
  );
  background-position: -365px 0px;
}
.footer_product_list li:nth-child(2) i {
  background-image: -webkit-image-set(
    url("/src/assets/footer.png") 1x,
    url("/src/assets/footer.png") 2x
  );
  background-position: -455px 0px;
}
.footer_product_list li:nth-child(3) i {
  background-image: -webkit-image-set(
    url("/src/assets/footer.png") 1x,
    url("/src/assets/footer.png") 2x
  );
  background-position: -558px 0px;
}
.footer_product_list li:nth-child(4) i {
  background-image: -webkit-image-set(
    url("/src/assets/footer.png") 1x,
    url("/src/assets/footer.png") 2x
  );
  background-position: -638px 0px;
}

/* 特色产品 */

.footer_product {
  width: 360px;
  height: 271px;
  /* border: 1px solid greenyellow; */
  margin: 0 88px;
}
.footer_product_list {
  height: 137px;
  /* border: 1px solid red; */
}
.footer_product_list li:nth-child(5),
.footer_product_list li:nth-child(6) {
  height: 58px;
  /* border: 1px solid red; */
}
.footer_product_list__item a {
  color: #999;
}

/* TME集团官网 */

.footer_group {
  /* border: 1px solid gold; */
  position: absolute;
  top: 300px;
  left: 476px;
}

.footer_group_list .js_other_link {
  color: #999;
  font-size: 14px;
}

/* 合作链接 */

.footer_link {
  width: 300px;
  height: 297px;
  padding-bottom: 57px;
  /* border: 1px solid red; */
}

.footer_link_list {
  display: flex;
  width: 300px;
  flex-wrap: wrap;
}
.footer_link_list__item {
  width: 33.3%;
  height: 21px;
  margin-bottom: 12px;
}
.footer_link_list__item a {
  color: #999;
  font-size: 14px;
}

/*  开放平台*/
.footer_platform {
  width: 1190px;
  height: 132px;
  /* border: 1px solid red; */
  position: absolute;
  top: 300px;
}
.footer_platform_list {
  display: flex;
}
.footer_platform_list__item {
  margin-right: 50px;
}
.footer_platform_list__item a {
  color: #999;
  font-size: 14px;
}

/* 版权 */
.footer_copyright {
  position: absolute;
  top: 500px;
  width: 1200px;
  height: 84px;
  padding: 24px 0;
  /* border: 1px solid red; */
  text-align: center;
  font-size: 12px;
  color: #999;
}
.footer_copyright a {
  font-size: 12px;
  color: #999;
}
.footer_copyright p {
  height: 28px;
}
</style>
